<template>
  <div class="list">
		<a v-for="(v,i) in content" @click="check(i)" href="#"
		:class="{'active':activeIndex==i,'item':true}">
		   {{v}}
		</a>
	</div>
</template>

<script>
  export default{
    name:'',
    data(){
      return {
        activeIndex:0
      }
    },
		props:{
			content:{
				type:Array,
				default(){
					return []
				}
			},
			indexName:{
			  type:String,
			  default(){
				  return ""
			  }
			},
		},
    methods:{
      check(i){
				let key=Object.keys(this.content)
				window.event.preventDefault()
				this.activeIndex=i
				this.$store.state[this.indexName]=i
				this.$emit("changeType",{[this.indexName]:this.content[this.activeIndex]})
			}
    },
    components:{
       
    }
  }
</script>

<style scoped>
	.list{
		
	}
	.item{
		height: 26px;
		min-width: 27px;
		display: inline-block;
		padding: 6px;
		font-size: 15px;
		line-height: 14px;
		text-align: center;
		margin: 8px;
	}
	.item:nth-of-type(1){
		margin-left: 0px;
	}
	.item:nth-last-of-type(1){
		margin-right: 0px;
	}
	.item:hover{
		color: var(--bcc-focus-green);
	}
	.item.active:hover{
		color: #fff;
	}
	.active{
		color: #fff;
		background-color: var(--bcc-green);
	}
</style>
